<template>
  <div>
    <page-main class="page-main">
      <div>
        <el-row :gutter="20">
          <div class="header df">
            <!-- 地图左侧部分 -->
            <div class="map-left df fdc">
              <div class="nav" @click="$router.push('/xfSupervise/orgThree')">消防安全管理架构</div>
              <div class="event">
                <div class="net-content">
                  <div class="net-title df aic jcsb">
                    <div class="df aic">
                      <i class="iconfont icon-menu-s"></i>
                      实时联网设备
                    </div>
                  </div>
                  <div class="net-line df aic">
                    <div class="line-box df">
                      <div class="line-equipment">
                        <div class="line-text df fdc aic jcc" @click="deviceListClick(7)">
                          <div style="color: #65d67f; font-size: 14px">在线设备</div>
                          <div style="color: #b3efcf; font-size: 18px">
                            {{ totalData?.total?.online }}
                          </div>
                        </div>
                      </div>
                      <div class="water">
                        <dv-water-level-pond :config="config" style="width: 80px; height: 80px" />
                      </div>
                      <div class="unline-equipment">
                        <div class="line-text df fdc aic jcc" @click="deviceListClick(6)">
                          <div style="color: #5b778d; font-size: 14px">离线设备</div>
                          <div style="color: #ed9537; font-size: 18px">
                            {{ totalData?.total?.downline }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="warnning df jcsb">
                    <div class="warn-box warn-box1 df aic jcsb" @click="yuJingBoBaoList(3, 1)">
                      <div class="warn-text">火警</div>
                      <div class="warn-num" style="color: #df3224">
                        {{ totalData?.total?.method_bj }}
                      </div>
                    </div>
                    <div class="warn-box warn-box2 df aic jcsb" @click="yuJingBoBaoList(2, 1)">
                      <div class="warn-text">故障</div>
                      <div class="warn-num" style="color: #ed9537">
                        {{ totalData?.total?.method_gz }}
                      </div>
                    </div>
                    <div class="warn-box warn-box3 df aic jcsb" @click="yuJingBoBaoList(1, 1)">
                      <div class="warn-text">监管</div>
                      <div class="warn-num" style="color: #ebc745">
                        {{ totalData?.total?.method_yj }}
                      </div>
                    </div>
                    <div class="warn-box warn-box4 df aic jcsb">
                      <div class="warn-text">联网单位</div>
                      <div class="warn-num" style="color: #57baee">
                        {{ totalData?.total?.unit_number }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="Networked">
                <div class="event-content">
                  <div class="event-title df aic jcsb">
                    <div class="df aic">
                      <i class="iconfont icon-menu-s"></i>
                      <h4>事件播报</h4>
                    </div>
                    <i class="iconfont icon-qita" @click="yuJingBoBaoList(3, '')"></i>
                  </div>
                  <div class="event-box">
                    <div class="event-list df">
                      <div class="event-type" style="background-color: #cd2c1e">火警</div>
                      <div class="event-text"></div>
                    </div>
                    <div class="event-list df">
                      <div class="event-type" style="background-color: #3e82f4" v-if="totalData?.warnList?.length">
                        监管
                      </div>
                      <div class="event-text">
                        <noticePLay :messages="noticeList"> </noticePLay>
                      </div>
                    </div>
                    <div class="event-list df">
                      <div class="event-type" style="background-color: #cbab3a">故障</div>
                      <div class="event-text">
                        <noticePLay :messages="noticeList"> </noticePLay>
                      </div>
                    </div>
                    <div class="event-list df">
                      <div class="event-type" style="background-color: #429458">已处理</div>
                      <div class="event-text"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 地图部分 -->
            <div class="map-main">
              <div class="map">
                <map-container></map-container>
              </div>
            </div>
            <!-- 地图右侧部分 -->
            <div class="map-right">
              <!-- 未处理隐患区域 -->
              <div class="danger-content df fdc">
                <div class="danger-title df aic jcsb">
                  <div class="df aic">
                    <i class="iconfont icon-menu-s"></i>
                    <h4>宣传视频</h4>
                  </div>
                  <!-- <router-link
                                        to="/hiddenDanger/hiddenDangerMange"
                                        ><i class="iconfont icon-qita"> </i
                                    ></router-link> -->
                </div>
                <div class="video-box">
                  <el-carousel :autoplay="false" :height="100" :interval="5000" arrow="always">
                    <el-carousel-item v-for="item in 4" :key="item" style="height: 230px">
                      <div class="video-inner">
                        <!-- <video ref="videoPlayer" id="videoPlayer" autoplay muted
                                                    style="width: 100%">
                                                    <source src="../../assets/h_video.mp4" />
                                                </video> -->
                      </div>
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <!-- <div class="df">
                                    <div class="danger-circle df fdc aic">
                                        <circle-charts :titleText="titleText" :seriesData="seriesData"
                                            id="circleCharts"></circle-charts>
                                        日常巡查隐患
                                    </div>
                                    <div class="danger-circle df fdc aic">
                                        <circle-charts :titleText="titleText1" :seriesData="seriesData1"
                                            id="circleCharts1"></circle-charts>
                                        设施设备隐患
                                    </div>
                                </div>
                                <div class="danger-circle df fdc aic" style="margin: auto">
                                    <circle-charts :titleText="titleText2" :seriesData="seriesData2"
                                        id="circleCharts2"></circle-charts>
                                    公众举报隐患
                                </div> -->
              </div>
            </div>
          </div>
          <!-- 监管播报区域 -->
          <!-- <el-col :span="12">
                        <div class="borderItem" style="height: 400px">
                            <div style="margin-bottom: 10px; font-size: 22px">
                                监管播报
                            </div>
                            <div style="width: 100%; height: 310px">
                                <table style="width: 100%">
                                    <col width="20%" />
                                    <col width="20%" />
                                    <col width="20%" />
                                    <col width="15%" />
                                    <col width="25%" />
                                    <tr>
                                        <th>设备名称</th>
                                        <th>设备位置</th>
                                        <th>事件类型</th>
                                        <th>状态</th>
                                        <th>发生时间</th>
                                    </tr>
                                </table>
                                <el-scrollbar
                                    style="width: 100%; height: 100%"
                                    ref="scrollbar"
                                    @mouseenter="scrollMouseenter"
                                    @mouseleave="scrollMouseleave"
                                >
                                    <template
                                        v-if="totalData?.warnList?.length"
                                    >
                                        <div
                                            class="scrollBox"
                                            style="width: 100%"
                                        >
                                            <table
                                                style="width: 100%"
                                                align="center"
                                                @click="yuJingBoBaoList(3, '')"
                                                v-loading="yuTableLoading"
                                            >
                                                <col width="20%" />
                                                <col width="20%" />
                                                <col width="20%" />
                                                <col width="15%" />
                                                <col width="25%" />
                                                <tbody>
                                                    <tr
                                                        v-for="(
                                                            item, index
                                                        ) in totalData.warnList"
                                                        :key="index"
                                                    >
                                                        <td
                                                            style="
                                                                text-align: center;
                                                            "
                                                        >
                                                            {{
                                                                item.device_name
                                                            }}
                                                        </td>
                                                        <td
                                                            style="
                                                                text-align: center;
                                                            "
                                                        >
                                                            {{ item.address }}
                                                        </td>
                                                        <td
                                                            style="
                                                                text-align: center;
                                                            "
                                                        >
                                                            {{
                                                                item.device_remark
                                                            }}
                                                        </td>
                                                        <td
                                                            style="
                                                                text-align: center;
                                                            "
                                                            :style="{
                                                                color:
                                                                    item.status ==
                                                                    1
                                                                        ? '#F56C6C'
                                                                        : '#67C23A',
                                                            }"
                                                        >
                                                            {{
                                                                item.status == 1
                                                                    ? "未处理"
                                                                    : "已处理"
                                                            }}
                                                        </td>
                                                        <td
                                                            style="
                                                                text-align: center;
                                                            "
                                                        >
                                                            {{
                                                                $getDateTime(
                                                                    item.create_time
                                                                )
                                                            }}
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <el-empty
                                            description="暂无数据"
                                        ></el-empty>
                                    </template>
                                </el-scrollbar>
                            </div>
                        </div>
                    </el-col> -->
          <!-- 物联网基础数据统计区域 -->
          <!-- <el-col :span="12">
                        <div class="borderItem" style="height: 400px">
                            <div style="margin-bottom: 10px; font-size: 22px">
                                物联网基础数据统计
                            </div>
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-button
                                        type="danger"
                                        class="btnItem"
                                        @click="yuJingBoBaoList(3, 1)"
                                    >
                                        <div>
                                            <div class="marginBottom">火警</div>
                                            <div>
                                                {{
                                                    totalData?.total?.method_bj
                                                }}
                                            </div>
                                        </div>
                                    </el-button>
                                </el-col>
                                <el-col :span="8">
                                    <el-button
                                        type="primary"
                                        class="btnItem"
                                        @click="yuJingBoBaoList(1, 1)"
                                    >
                                        <div>
                                            <div class="marginBottom">监管</div>
                                            <div>
                                                {{
                                                    totalData?.total?.method_yj
                                                }}
                                            </div>
                                        </div>
                                    </el-button>
                                </el-col>
                                <el-col :span="8">
                                    <el-button
                                        type="warning"
                                        class="btnItem"
                                        @click="yuJingBoBaoList(2, 1)"
                                    >
                                        <div>
                                            <div class="marginBottom">故障</div>
                                            <div>
                                                {{
                                                    totalData?.total?.method_gz
                                                }}
                                            </div>
                                        </div>
                                    </el-button>
                                </el-col>
                                <el-col :span="12">
                                    <div class="gridItem">
                                        <div class="fontSize">
                                            {{
                                                parseFloat(
                                                    (
                                                        (Number(
                                                            totalData?.total
                                                                ?.exec_bj
                                                        ) /
                                                            Number(
                                                                totalData?.total
                                                                    ?.total_method_bj
                                                            )) *
                                                        100
                                                    ).toFixed(0)
                                                ) || 0
                                            }}%
                                        </div>
                                        <div>火警处理率</div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div
                                        class="gridItem"
                                        style="cursor: pointer"
                                    >
                                        <div class="fontSize">
                                            {{ totalData?.total?.unit_number }}
                                        </div>
                                        <div>联网单位</div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="gridItem">
                                        <div class="fontSize">
                                            {{
                                                totalData?.total?.report_number
                                            }}
                                        </div>
                                        <div>数据上报</div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div
                                        class="gridItem"
                                        style="cursor: pointer"
                                        @click="deviceListClick('')"
                                    >
                                        <div class="fontSize">
                                            {{ totalData?.total?.device_total }}
                                        </div>
                                        <div>联网设备</div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div
                                        class="gridItem"
                                        style="cursor: pointer"
                                        @click="deviceListClick(7)"
                                    >
                                        <div class="fontSize">
                                            {{ totalData?.total?.online }}
                                        </div>
                                        <div>在线设备</div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="gridItem">
                                        <div class="fontSize">
                                            {{ guzhangRate }}
                                        </div>
                                        <div>设备故障率</div>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div
                                        class="gridItem"
                                        style="cursor: pointer"
                                        @click="deviceListClick(6)"
                                    >
                                        <div class="fontSize">
                                            {{ totalData?.total?.downline }}
                                        </div>
                                        <div>离线设备</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col> -->
          <!-- 十个方块区域 -->
          <el-col class="TenBox">
            <!-- 单位履责监管区域 -->
            <div class="borderItem green-box">
              <div class="df aic">
                <i class="iconfont icon-menu-s"></i>
                <h3 style="display: inline-block" class="h3-title">单位履责监管</h3>
              </div>

              <div class="fiveItemBox">
                <div class="btnItem btnItemBgc" @click="showTableComponent('unitMange')">
                  <div class="dwlz-label">未及时巡查检查</div>
                  <div
                    class="yj-val"
                    :style="{
                      color: statusCount?.cq > 0 ? '#eb7506' : ''
                    }"
                  >
                    {{ statusCount?.cq }}
                  </div>
                </div>
                <div class="btnItem btnItemBgc" @click="showTableComponent('dangerWcl')">
                  <div class="dwlz-label">未及时整改巡查检查不合格项</div>
                  <div
                    class="yj-val"
                    :style="{
                      color: statusCount?.bhg > 0 ? '#eb7506' : ''
                    }"
                  >
                    {{ statusCount?.bhg }}
                  </div>
                </div>
                <div class="btnItem btnItemBgc" @click="showTableComponent('drillTrain', 'overtimeDrillUnitTotal')">
                  <div class="dwlz-label">未及时组织消防演练</div>
                  <div
                    class="yj-val"
                    :style="{
                      color: totalData?.total?.overtimeDrillUnitTotal > 0 ? '#eb7506' : ''
                    }"
                  >
                    {{ totalData?.total?.overtimeDrillUnitTotal }}
                  </div>
                </div>
                <div class="btnItem btnItemBgc" @click="showTableComponent('drillTrain', 'overtimeTrainUnitTotal')">
                  <div class="dwlz-label">未及时组织消防培训</div>
                  <div
                    class="yj-val"
                    :style="{
                      color: totalData?.total?.overtimeTrainUnitTotal > 0 ? '#eb7506' : ''
                    }"
                  >
                    {{ totalData?.total?.overtimeTrainUnitTotal }}
                  </div>
                </div>
                <div class="btnItem btnItemBgc" @click="showTableComponent('overtimeHighBuildingUnitTotal')">
                  <div class="dwlz-label">高层民用建筑未及时完成消防安全评估</div>
                  <div
                    class="yj-val"
                    :style="{
                      color: totalData?.total?.overtimeHighBuildingUnitTotal > 0 ? '#eb7506' : ''
                    }"
                  >
                    {{ totalData?.total?.overtimeHighBuildingUnitTotal }}
                  </div>
                </div>
                <!-- <div
                                    class="btnItem btnItemBgc"
                                    @click="
                                        showTableComponent(
                                            'overtimeHighBuildingUnitTotal'
                                        )
                                    "
                                >
                                    <div class="dwlz-label">待巡查</div>
                                    <div
                                        class="yj-val"
                                        :style="{
                                            color:
                                                totalData?.total
                                                    ?.overtimeHighBuildingUnitTotal >
                                                0
                                                    ? '#eb7506'
                                                    : ''
                                        }"
                                    >
                                        {{
                                            totalData?.total
                                                ?.overtimeHighBuildingUnitTotal
                                        }}
                                    </div>
                                </div> -->
                <div class="btnItem btnItemBgc" @click="showTableComponent('overtimeHighBuildingUnitTotal')">
                  <div class="dwlz-label">巡查待审核</div>
                  <div
                    class="yj-val"
                    :style="{
                      color: totalData?.total?.overtimeHighBuildingUnitTotal > 0 ? '#eb7506' : ''
                    }"
                  >
                    {{ totalData?.total?.overtimeHighBuildingUnitTotal }}
                  </div>
                </div>
                <div class="btnItem btnItemBgc" @click="showTableComponent('overtimeHighBuildingUnitTotal')">
                  <div class="dwlz-label">三关一闭</div>
                  <div
                    class="yj-val"
                    :style="{
                      color: totalData?.total?.overtimeHighBuildingUnitTotal > 0 ? '#eb7506' : ''
                    }"
                  >
                    {{ totalData?.total?.overtimeHighBuildingUnitTotal }}
                  </div>
                </div>
                <div class="btnItem btnItemBgc" @click="showTableComponent('overtimeHighBuildingUnitTotal')">
                  <div class="dwlz-label">未学习</div>
                  <div
                    class="yj-val"
                    :style="{
                      color: totalData?.total?.overtimeHighBuildingUnitTotal > 0 ? '#eb7506' : ''
                    }"
                  >
                    {{ totalData?.total?.overtimeHighBuildingUnitTotal }}
                  </div>
                </div>
                <div class="btnItem btnItemBgc" @click="showTableComponent('overtimeHighBuildingUnitTotal')">
                  <div class="dwlz-label">烟道清洗逾期</div>
                  <div
                    class="yj-val"
                    :style="{
                      color: totalData?.total?.overtimeHighBuildingUnitTotal > 0 ? '#eb7506' : ''
                    }"
                  >
                    {{ totalData?.total?.overtimeHighBuildingUnitTotal }}
                  </div>
                </div>
              </div>
              <div class="df aic">
                <i class="iconfont icon-menu-s"></i>
                <h3 style="display: inline-block">技术服务监管</h3>
              </div>
              <div style="display: flex">
                <div class="fiveItemBox fiveItemBox-slow">
                  <div class="btnItem btnItemBgc" @click="showTableComponent('workOrderTotal')">
                    <div class="dwlz-label">时间过短</div>
                    <div
                      class="yj-val"
                      :style="{
                        color: totalData?.total?.workOrder_total > 0 ? '#eb7506' : ''
                      }"
                    >
                      {{ totalData?.total?.workOrder_total }}
                    </div>
                  </div>
                  <div class="btnItem btnItemBgc" @click="showTableComponent('faceRecognitionMismatch')">
                    <div class="dwlz-label">人脸不符</div>
                    <div
                      class="yj-val"
                      :style="{
                        color: totalData?.total?.noSelfLocationTotal > 0 ? '#eb7506' : ''
                      }"
                    >
                      {{ totalData?.total?.noSelfLocationTotal }}
                    </div>
                  </div>
                  <div class="btnItem btnItemBgc" @click="showTableComponent('outPlanLocationTotal')">
                    <div class="dwlz-label">运行轨迹不符</div>
                    <div
                      class="yj-val"
                      :style="{
                        color: totalData?.total?.outPlanLocationTotal > 0 ? '#eb7506' : ''
                      }"
                    >
                      {{ totalData?.total?.outPlanLocationTotal }}
                    </div>
                  </div>
                  <div class="btnItem btnItemBgc" @click="showTableComponent('notOnTimeGive')">
                    <div class="dwlz-label">未按时完成技术服务报告</div>
                    <div
                      class="yj-val"
                      :style="{
                        color: totalData?.total?.monthPlanUnit_total > 0 ? '#eb7506' : ''
                      }"
                    >
                      {{ totalData?.total?.monthPlanUnit_total }}
                    </div>
                  </div>

                  <div class="btnItem btnItemBgc" @click="showTableComponent('twoMonthDangerUnitSourceWbTotal')">
                    <div class="dwlz-label">两个月未整改完成消防设施故障</div>
                    <div
                      class="yj-val"
                      :style="{
                        color: totalData?.total?.twoMonthDangerUnitSourceWbTotal > 0 ? '#eb7506' : ''
                      }"
                    >
                      {{ totalData?.total?.twoMonthDangerUnitSourceWbTotal }}
                    </div>
                  </div>
                </div>
                <div class="deal-box map-right">
                  <div class="danger-content df fdc">
                    <div class="danger-title df aic jcsb">
                      <div class="df aic">
                        <i class="iconfont icon-menu-s"></i>
                        <h4>未处理隐患</h4>
                      </div>
                      <router-link to="/hiddenDanger/hiddenDangerMange"
                        ><i class="iconfont icon-qita"> </i
                      ></router-link>
                    </div>
                    <div class="df">
                      <div class="danger-circle df fdc aic">
                        <circle-charts
                          :titleText="titleText"
                          :seriesData="seriesData"
                          id="circleCharts"
                        ></circle-charts>
                        日常巡查隐患
                      </div>
                      <div class="danger-circle df fdc aic">
                        <circle-charts
                          :titleText="titleText1"
                          :seriesData="seriesData1"
                          id="circleCharts1"
                        ></circle-charts>
                        设施设备隐患
                      </div>
                      <div class="danger-circle df fdc aic">
                        <circle-charts
                          :titleText="titleText2"
                          :seriesData="seriesData2"
                          id="circleCharts2"
                        ></circle-charts>
                        公众举报隐患
                      </div>
                    </div>
                    <!-- <div
                                    class="danger-circle df fdc aic"
                                    style="margin: auto"
                                >
                                    <circle-charts
                                        :titleText="titleText2"
                                        :seriesData="seriesData2"
                                        id="circleCharts2"
                                    ></circle-charts>
                                    公众举报隐患
                                </div> -->
                  </div>
                </div>
              </div>
            </div>
            <!-- 安全得分区域 -->
            <div class="safe">
              <div class="df aic">
                <i class="iconfont icon-menu-s"></i>
                <h3 style="display: inline-block" class="h3-title">安全得分</h3>
              </div>
              <div class="safe-box">
                <div class="safe-score">
                  <div class="pie-box">
                    <div ref="pieChart" style="width: 100%; height: 200px"></div>
                  </div>
                </div>
                <!-- 安全趋势（最近一周）区域 -->
                <div class="safe-line">
                  <div ref="colChart" style="width: 100%; height: 250px"></div>
                </div>
              </div>
            </div>
          </el-col>
          <!-- 商户排名 -->
          <div class="department">
            <h4 class="title">商户排名</h4>
            <dv-scroll-ranking-board :config="hosipital" style="padding: 0 30px" />
          </div>

          <!-- 警情日报线形图区域 -->
          <el-col :span="24">
            <div class="borderItem echarts-w" style="height: 400px">
              <div ref="dailyAlarmsChart" style="width: 100%; height: 100%"></div>
              <i class="iconfont icon-qita SelfIcon" @click="toSelfPath('/xfSupervise/policeIntelligenceDaily')"></i>
            </div>
            <!-- 巡查统计线形图区域 -->
            <div class="borderItem echarts-w" style="height: 400px">
              <div ref="patrolStatisticsChart" style="width: 100%; height: 100%"></div>
              <i class="iconfont icon-qita SelfIcon"></i>
            </div>
          </el-col>
          <!-- 巡查统计线形图区域 -->
          <!-- <el-col :span="24">
                        <div class="borderItem" style="height: 400px">
                            <div
                                ref="patrolStatisticsChart"
                                style="width: 100%; height: 100%"
                            ></div>
                        </div>
                    </el-col> -->
          <!-- 联网设备统计区域 -->
          <!-- <el-col :span="12">
                        <div class="borderItem">
                            <div style="margin-bottom: 10px; font-size: 22px">
                                联网设备统计
                            </div>
                            <div
                                ref="pieChart"
                                style="width: 100%; height: 390px"
                            ></div>
                        </div>
                    </el-col> -->
          <!-- 安全趋势（最近一周）区域 -->
          <!-- <el-col :span="12">
                        <div class="borderItem">
                            <div style="margin-bottom: 10px; font-size: 22px">
                                <span style="margin-right: 10px"
                                    >安全趋势（最近一周）</span
                                >
                            </div>
                            <div
                                ref="colChart"
                                style="width: 100%; height: 380px"
                            ></div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="borderItem">
                            <div style="margin-bottom: 10px; font-size: 22px">
                                联网单位情况查看
                            </div>
                            <div>
                                <el-table
                                    :data="tableData"
                                    stripe
                                    style="width: 100%"
                                >
                                    <el-table-column
                                        prop="name"
                                        label="名称"
                                    ></el-table-column>
                                    <el-table-column label="数量">
                                        <template #default="scope">
                                            <span class="redColor">
                                                <span>{{
                                                    scope.row.preCount
                                                }}</span>
                                                <i class="el-icon-right"></i>
                                            </span>
                                            <span class="greenColor">{{
                                                scope.row.nextCount
                                            }}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="状态">
                                        <template #default="scope">
                                            <el-tag effect="plain">{{
                                                scope.row.nextCount ==
                                                scope.row.preCount
                                                    ? "无变化"
                                                    : "有变化"
                                            }}</el-tag>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-col> -->
        </el-row>
      </div>
    </page-main>
    <!-- 监管播报列表 -->
    <el-dialog v-model="yuJingBoBaoListDialog" width="70%" destroy-on-close>
      <yuJingBoBao :yuJingType="yuJingType" :yuJingStatus="yuJingStatus"> </yuJingBoBao>
    </el-dialog>
    <!-- 详情 -->

    <!-- 物联网基础数据统计联网单位列表 -->
    <el-dialog v-model="basicsListDialog" width="85%">
      <networkUnitStatistics :rows="10"></networkUnitStatistics>
    </el-dialog>
    <!-- 物联网基础数据统计联网设备列表 -->
    <el-dialog v-model="deviceListDialog" width="85%" destroy-on-close>
      <equipmentStatistics :rows="10" :deviceStatus="deviceStatus"> </equipmentStatistics>
    </el-dialog>
    <el-dialog v-model="tableDialogVisabled" width="85%" destroy-on-close :close-on-click-modal="false">
      <component :is="tableComponentName" :data="earlyWarning" :patrol_status="1" :drillTrainType="drillTrainType">
      </component>
    </el-dialog>
  </div>
</template>

<script>
import yuJingBoBao from '@/views/xfSupervise/components/yuJingBoBao.vue'
import { mapState } from 'vuex'
import networkUnitStatistics from '@/views/xfSupervise/components/networkUnitStatistics.vue'
import equipmentStatistics from '@/views/xfSupervise/components/equipmentStatistics.vue'
import Echarts from '@/util/echarts'
import { markRaw } from 'vue'
// 分页
import paginationMixin from '@/mixins/pagination'
import faceRecognitionMismatch from '@/views/xfSupervise/components/faceRecognitionMismatch.vue'
import unitMange from '@/views/xfSupervise/components/unitMange.vue'
import dangerWcl from '@/views/xfSupervise/components/dangerWcl.vue'
import drillTrain from '@/views/xfSupervise/components/drillTrain.vue'
import overtimeHighBuildingUnitTotal from '@/views/xfSupervise/components/overtimeHighBuildingUnitTotal.vue'
import workOrderTotal from '@/views/xfSupervise/components/workOrderTotal.vue'
import notOnTimeGive from '@/views/xfSupervise/components/notOnTimeGive.vue'
import outPlanLocationTotal from '@/views/xfSupervise/components/outPlanLocationTotal.vue' //运行轨迹不符
import twoMonthDangerUnitSourceWbTotal from '@/views/xfSupervise/components/twoMonthDangerUnitSourceWbTotal.vue'
import api from '@/api'
import MapContainer from './components/MapContainer.vue'
// 未处理隐患弹窗模块
import hiddenDangerMange from '@/router/modules/hiddenDangerMange'

// 引入圆形图组件
import CircleCharts from './components/circleCharts.vue'
// import CircleCharts from "./components/circleCharts.vue";

import noticePLay from './components/noticePLay.vue'

// const alarmAudio = document.getElementById("alarm_audio");
export default {
  // 分页
  mixins: [paginationMixin],
  components: {
    networkUnitStatistics,
    equipmentStatistics,
    yuJingBoBao,
    faceRecognitionMismatch,
    unitMange,
    dangerWcl,
    drillTrain,
    overtimeHighBuildingUnitTotal,
    workOrderTotal,
    notOnTimeGive,
    outPlanLocationTotal,
    twoMonthDangerUnitSourceWbTotal,
    MapContainer,
    CircleCharts,
    hiddenDangerMange,
    noticePLay
  },
  data() {
    return {
      hosipital: {
        data: [
          {
            name: '外科',
            value: 55
          },
          {
            name: '内科',
            value: 120
          },
          {
            name: '儿童科',
            value: 78
          },
          {
            name: '骨科',
            value: 66
          },
          {
            name: '皮肤科',
            value: 80
          },
          {
            name: '口腔科',
            value: 45
          },
          {
            name: '消化内科',
            value: 29
          }
        ]
      },
      earlyWarning: 0,
      colChartOptions: [
        {
          value: '0',
          label: '最近一周'
        },
        {
          value: '1',
          label: '最近一月'
        },
        {
          value: '2',
          label: '最近一年'
        }
      ],
      colChartValue: '0',
      pieChart: '',
      tableData: [],
      totalData: [],
      yuTableLoading: false,
      yuJingBoBaoListDialog: false,
      //   联网单位模态框
      basicsListDialog: false,
      // 联网设备模态框
      deviceListDialog: false,
      // 联网设备列表数据
      height: 0,
      timer: null,
      scrollbar: '',
      timer_base_data: 0, //物联网技术数据统计/监管播报定时器
      hasRenderPieChart: false,
      hasRenderColChart: false,
      yuJingType: '',
      yuJingStatus: '',
      deviceStatus: '',
      tableDialogVisabled: false,
      dailyAlarmsChart: '',
      patrolStatisticsChart: '',
      statusCount: {},
      config: {
        data: [],
        shape: 'round',
        waveNum: 1,
        waveHeight: 10,
        waveOpacity: 0.7,
        colors: ['#90e9ec']
      },
      titleText: '12',
      seriesData: [60],
      titleText1: '15',
      seriesData1: [69],
      titleText2: '19',
      seriesData2: [6],
      dataxx: {},
      noticeList: []
    }
  },
  computed: {
    ...mapState({
      is_clear_timer_alarm: (state) => state.user.is_clear_timer_alarm
    }),
    guzhangRate() {
      let _rate = ''
      _rate = (
        ((parseInt(this.totalData?.total?.status_gz, 10) + parseInt(this.totalData?.total?.downline, 10)) /
          parseInt(this.totalData?.total?.device_total)) *
        100
      ).toFixed(0)
      return isNaN(_rate) ? '-' : `${_rate}%`
    }
  },
  mounted() {
    this.$store.commit('user/setClearTimer', false)
    this.getData()
    this.getearlyWarning()

    // this.getDataList()
    // 监管播报自动滚动
    // this.$nextTick(() => {
    //     this.scrollMethod();
    // });
    setTimeout(() => {
      //   this.$refs.videoPlayer.muted = false;
      this.$refs.videoPlayer.play()
    }, 2000)
    this.getChartData()
    // this.config.data = totalData.total.onRate;
  },
  beforeUnmount() {
    this.$store.commit('user/setClearTimer', true)
    setTimeout(() => {
      // alarmAudio.pause();
    }, 10)
    clearInterval(this.timer)
    clearTimeout(this.timer_base_data)
  },

  methods: {
    getearlyWarning() {
      console.log(this)
      this.$apis.get('/unit/PatrolPosition/statusCount').then((res) => {
        if (res.code == 200) {
          this.statusCount = res.data
        }
      })
    },
    getChartData() {
      this.$api.post('unit/Dashboard/WarnTrend').then((res) => {
        if (res.code == 200) {
          this.regionData = res.data
          this.renderdailyAlarmsChart()
        }
      })
      this.$api.post('unit/Dashboard/patrolTrend').then((res) => {
        if (res.code == 200) {
          this.regionData = res.data
          this.renderpatrolStatisticsChart()
        }
      })
    },
    showTableComponent(component, type) {
      if (component == 'unitMange') {
        this.earlyWarning = 10
      }
      if (type) {
        this.drillTrainType = type
      }
      this.tableComponentName = component
      this.tableDialogVisabled = true
    },
    formatDate(row, column, time, index) {
      return this.$getDateTime(time)
    },
    //   鼠标移入
    // scrollMouseenter() {
    //     clearInterval(this.timer);
    // },
    // 鼠标移出
    // scrollMouseleave() {
    //     this.scrollMethod();
    // },
    // 滚动事件
    // scroll(e) {
    //     this.height = e.target.scrollTop;
    // },
    //   监管播报自动滚动
    // scrollMethod() {
    //     let el = this.$refs["scrollbar"]?.wrapRef;
    //     this.scrollbar = el;
    //     el.addEventListener("scroll", this.scroll);
    //     this.timer = setInterval(() => {
    //         this.height += 1;
    //         // 设置滚动条
    //         el.scrollTop = this.height;
    //         // 当滚动到底部，回到顶部
    //         if (
    //             Math.ceil(el.scrollTop) + el.clientHeight ==
    //             el.scrollHeight
    //         ) {
    //             el.scrollTop = 0;
    //             this.height = 0;
    //         }
    //     }, 150);
    // },
    deviceListClick(status) {
      this.deviceStatus = status
      this.deviceListDialog = true
    },
    basicsListClick() {
      this.$router.push({
        path: '/decisionAnalysis/networkUnitDistribution'
      })
    },
    //   监管播报列表
    // yuJingBoBaoList(type, status) {
    //     this.yuJingType = type;
    //     this.yuJingStatus = status;
    //     this.yuJingBoBaoListDialog = true;
    // },
    //未处理隐患列表
    getData() {
      this.yuTableLoading = true
      this.timer_base_data && clearTimeout(this.timer_base_data)
      if (this.is_clear_timer_alarm) return false
      this.$api
        .post('/unit/PublicShow/pcIndex')
        .then((res) => {
          //   设置侧边栏显示的数字
          this.$store.commit('aside/setTotal', {
            total: res.data.total.method_bj
          })
          this.totalData = res.data
          console.log('res.data', res.data)
          this.totalData.warnList.forEach((v, i) => {
            if (i === 0) {
              this.dataxx = this.totalData.warnList[i]
              this.noticeList.push(this.dataxx.address)
              this.noticeList.push(this.dataxx.device_name)
            }
          })

          this.config.data = [parseFloat(this.totalData.total.onRate.slice(0, -1))]
          if (this.totalData.total.method_bj || this.totalData.total.method_gz || this.totalData.total.method_yj) {
            this.$store.commit('tabbar/IsPlay', true)
          } else {
            this.$store.commit('IsPlay', false)
          }
          let is_play_alarm = this.totalData?.warnList.some((item) => {
            return item.status == 1
          })
          // if (is_play_alarm) alarmAudio.play();
          // else alarmAudio.pause();
          !this.hasRenderPieChart && this.renderPieChart()
          !this.hasRenderColChart && this.renderColChart()
          let tempData = []
          res.data?.unitTotal?.last.map((curVal) => {
            tempData.push({
              name: curVal.value,
              preCount: curVal.total,
              nextCount: ''
            })
          })
          res.data?.unitTotal?.curr.map((curVal, index) => {
            if (tempData[index].name == curVal.value) {
              tempData[index].nextCount = curVal.total
            }
          })
          if (!this.tableData.length) this.tableData = tempData
          this.timer_base_data = setTimeout(() => {
            this.getData()
          }, 3000)
        })
        .catch((e) => {
          clearTimeout(this.timer_base_data)
        })
        .finally(() => {
          this.yuTableLoading = false
        })
    },
    //巡查日报折线图
    toSelfPath(path) {
      this.$router.push({
        path
      })
    },
    renderpatrolStatisticsChart() {
      this.patrolStatisticsChart = markRaw(Echarts.init(this.$refs.patrolStatisticsChart))

      let data = this.regionData
      let time = []
      let legendData = []
      let series = []
      let seriesData = []
      for (let key in data) {
        time.push(key)
        for (let item in data[key]) {
          if (legendData.indexOf(item) == -1) {
            legendData.push(item)
            series.push({
              name: item,
              type: 'scatter',
              showSymbol: false,
              data: []
            })
          }
        }
        seriesData.push(data[key])
      }

      series.map((item) => {
        seriesData.forEach((item2) => {
          for (const key in item2) {
            if (item.name == key) {
              item.data.push(item2[key])
            }
          }
        })
      })

      let option = {
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400,
            inRange: {
              // color: ['#445da5', '#0b1d78'],
              symbolSize: [10, 10]
            }
          },
          {
            show: false,
            type: 'continuous',
            seriesIndex: 1,
            min: 0,
            max: 400,
            inRange: {
              // color: ['#A531DC', '#4300B1'],
              symbolSize: [10, 10]
            }
          },
          {
            show: false,
            type: 'continuous',
            seriesIndex: 2,
            min: 0,
            max: 400,
            inRange: {
              // color: ['#eaeaea', '#8b8b8b'],
              symbolSize: [10]
            }
          }
        ],

        title: {
          left: 'left',
          text: '巡查日报',
          textStyle: {
            fontSize: 22,
            color: '#6eecee'
            // rich: {
            //     "my-icon": {
            //         fontFamily: "iconfont",
            //         fontSize: 20,
            //         content: "&#xe653",
            //     },
            // },
          }
        },

        xAxis: {
          data: time,
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },

        yAxis: {
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        legend: {
          data: legendData,
          textStyle: {
            color: '#fff' // 设置文本颜色为白色
          }
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        dataZoom: {
          type: 'inside', // inside: 表示用内测滑块
          // startValue: this.start,     // 开始显示的数
          // endValue: this.end,       // 结束显示的数
          xAxisIndex: [0], // 代表是作用在y轴上的
          // start: '10',
          // end: '1'
          // zoomLock: true,
          zoomOnMouseWheel: true, // 关闭滚轮缩放
          moveOnMouseWheel: false, // 开启滚轮平移
          moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
        },
        series: series,
        tooltip: {
          trigger: 'axis',
          formatter(params) {
            let str = params[0]['axisValue']
            params.forEach((item) => {
              str += '</br>' + item.marker + item.seriesName + '&nbsp;' + item.value
            })
            return str
          }
        }
      }
      this.patrolStatisticsChart.setOption(option)
    },
    // 折线图
    renderdailyAlarmsChart() {
      this.dailyAlarmsChart = markRaw(Echarts.init(this.$refs.dailyAlarmsChart))
      let data = this.regionData
      let time = []
      let legendData = []
      let series = []
      let seriesData = []
      for (let key in data) {
        time.push(key)
        for (let item in data[key]) {
          if (legendData.indexOf(item) == -1) {
            legendData.push(item)
            series.push({
              name: item,
              type: 'line',
              showSymbol: false,
              smooth: true,
              data: []
            })
          }
        }
        seriesData.push(data[key])
      }
      series.map((item) => {
        seriesData.forEach((item2) => {
          for (const key in item2) {
            if (item.name == key) {
              item.data.push(item2[key])
            }
          }
        })
      })
      let option = {
        visualMap: [
          {
            show: false,
            type: 'continuous',
            seriesIndex: 0,
            min: 0,
            max: 400,
            inRange: {
              color: ['#5470c6', '#0b1d78'],
              symbolSize: [5, 5]
            }
          },
          {
            show: false,
            type: 'continuous',
            seriesIndex: 1,
            min: 0,
            max: 400,
            inRange: {
              color: ['#91cc75', '#4300B1'],
              symbolSize: [5, 5]
            }
          },
          {
            show: false,
            type: 'continuous',
            seriesIndex: 2,
            min: 0,
            max: 400,
            inRange: {
              color: ['#fac858', '#8b8b8b'],
              symbolSize: [5, 5]
            }
          }
        ],
        title: {
          left: 'left',
          text: '警情日报线形图',
          textStyle: {
            fontSize: 22,
            color: '#6eecee'
          }
        },

        xAxis: {
          data: time,
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },

        yAxis: {
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        legend: {
          data: legendData,
          textStyle: {
            color: '#fff' // 设置文本颜色为白色
          }
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        dataZoom: {
          type: 'inside', // inside: 表示用内测滑块
          // startValue: this.start,     // 开始显示的数
          // endValue: this.end,       // 结束显示的数
          xAxisIndex: [0], // 代表是作用在y轴上的
          // start: '10',
          // end: '1'
          // zoomLock: true,
          zoomOnMouseWheel: true, // 关闭滚轮缩放
          moveOnMouseWheel: false, // 开启滚轮平移
          moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
        },
        series: series,
        tooltip: {
          trigger: 'axis',
          formatter(params) {
            let str = params[0]['axisValue']
            params.forEach((item) => {
              // console.log('',item);
              str += '</br>' + item.marker + item.seriesName + '&nbsp;事件总数：' + item.value + '</br>&nbsp;'
            })
            return str
          }
        }
      }
      this.dailyAlarmsChart.setOption(option)
    },
    // 联网设备统计
    renderPieChart() {
      let tempData = this.totalData.installList
      let seriesData = []
      tempData.map((curVal) => {
        seriesData.push({
          value: curVal.total,
          name: curVal.mold_name
        })
      })
      this.pieChart = markRaw(Echarts.init(this.$refs.pieChart))
      let option = {
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //     type: "scroll",
        //     top: "bottom",
        //     textStyle: {
        //         color: "#fff", // 设置文本颜色为白色
        //     },
        // },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false, // 取消标签展示
              formatter: '{b}: {c}'
            },
            data: seriesData
          }
        ]
      }
      this.pieChart.setOption(option)
      this.hasRenderPieChart = true
    },
    // 安全得分
    renderColChart() {
      this.$api.post('/unit/PublicScore/getScoreTotalList', { before_days: 7 }).then((res) => {
        this.colChart = markRaw(Echarts.init(this.$refs.colChart))
        let xAxisData = []
        let score_avg = []
        let score_lz = []
        let score_wlw = []
        let score_wb = []
        for (let item of res.data) {
          let month = item.month < 10 ? '0' + item.month : item.month
          let day = item.day < 10 ? '0' + item.day : item.day
          score_avg.push(parseInt(item.score_avg.toFixed(0), 10))
          score_lz.push(parseInt(item.lz_avg.toFixed(0), 10))
          score_wlw.push(parseInt(item.wlw_avg.toFixed(0), 10))
          score_wb.push(parseInt(item.wb_avg.toFixed(0), 10))
          xAxisData.push(`${item.year}/${month}/${day}`)
        }
        let option = {
          tooltip: {
            trigger: 'axis'
          },
          // legend: {
          //     data: [
          //         "平均分",
          //         "履责得分",
          //         "物联网得分",
          //         "维保得分",
          //     ],
          //     textStyle: {
          //         color: "#fff", // 设置文本颜色为白色
          //     },
          // },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              rotate: 60,
              textStyle: {
                color: '#fff' // 设置文本颜色为白色
              }
            },
            data: xAxisData
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#fff' // 设置文本颜色为白色
              }
            }
          },
          series: [
            {
              name: '平均分',
              type: 'line',
              data: score_avg
            },
            {
              name: '履责得分',
              type: 'line',
              data: score_lz
            },
            {
              name: '物联网得分',
              type: 'line',
              data: score_wlw
            },
            {
              name: '维保得分',
              type: 'line',
              data: score_wb
            }
          ]
        }
        this.colChart.setOption(option)
        this.hasRenderColChart = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.TenBox {
  display: flex;
  padding: 0 !important;
}
.borderItem {
  padding: 30px 20px 30px 20px;
  // background-color: #071123;
  // background-color: rgba(4, 16, 123, 0.3);
  margin-bottom: 20px;
  border-radius: 10px;
  // height: 480px;
}
.gridItem {
  font-size: 13px;
  padding: 10px;
  margin-top: 5px;
}
.btnItem {
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.el-button--large {
  --el-button-size: auto;
}
.fiveItemBox {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .btnItemBgc {
    width: 19%;
    // text-align: left;
    padding: 35px 2px 20px;
    font-size: 20px;
    .marginBottom {
      font-size: 12px;
      margin-bottom: 0;
      margin-top: 10px;
      color: #fff;
    }
  }
}
.fiveItemBox-slow {
  width: 54% !important;
  .btnItemBgc {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .dwlz-label {
      margin-top: 0;
    }
  }
}
.video-box {
  height: 100%;
  .el-carousel__container {
    height: 100% !important;
  }
  .video-inner {
    width: 100%;
    height: 460px;
    .video {
      width: 100%;
      height: 100%;
    }
  }
}
#videoPlayer {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.el-carousel {
  height: 100%;
  .el-carousel__container {
    height: 100%;
    background: #fff;
  }
  > div {
    height: 100% !important;
  }
  .el-carousel__item {
    background: transparent !important;
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.green-box {
  width: 80%;
}
.btnItemBgc {
  //   background-color: #f9d166;
  height: auto !important;
  background-color: #071123;
  border: 1px #6eecee solid;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
.yj-val {
  margin-bottom: 10px;
  font-size: 30px;
}
.dwlz-label {
  font-size: 14px;
  margin-top: auto;
  color: #fff;
}
.marginBottom {
  margin-bottom: 10px;
  color: #fff;
}
.fontSize {
  font-size: 22px;
  font-weight: 700;
}
.warningItem {
  width: 100%;
  padding: 7px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 18px;
  div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 30%;
  }
}
.redColor {
  color: #f56c6c;
  text-decoration: line-through;
}
.greenColor {
  color: #67c23a;
}
:deep(.el-dialog) {
  margin-top: 80px !important;
}
th {
  border: 1px solid black;
}
.icon-menu-s {
  color: #6eecee;
  font-size: 30px;
}
h3 {
  color: #6eecee;
}
.page-main {
  // background-color: #041124;
  color: #fff;
  position: relative;
  // background-color: rgb(24, 45, 226);

  // background-image: url('../../assets/images/bg.png');
  // background-image: url('../../assets/images/6103.gif_wh860.gif');
  background-size: cover;
  background-position: 50%;
  background-size: 100% 100%;
  margin: 0;
  padding: 0;
}
.header {
  height: 500px;
  width: 100%;
  // position: relative;
  margin: 20px;
}
.map-left,
.map-right {
  flex: 1;
}
.map-left {
  margin-right: 10px;
}
.map-right {
  margin-left: 10px;
}
.map-main {
  flex: 2;
}
.map {
  width: 100%;
  height: 500px;
}
.event {
  width: 100%;
  height: 45%;
}
.Networked {
  width: 100%;
  height: 55%;
}

// 实时联网设备模块
.net-content {
  width: 100%;
  height: 96%;
  border: 1px solid #90e9ec;
  border-radius: 2%;
  margin-bottom: 10px;
  .water {
    width: 50px;
    height: 50px;
    margin-top: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-70%, -100%);
  }
  .net-title {
    height: 30px;
    margin: 0 10px;
    color: #6eecee;
    font-size: 10px;
  }
  .net-line {
    width: 100%;
    margin-left: 10%;
  }
  .line-box {
    position: relative;
    width: 80%;
    // margin-left: 10%;
  }
  .line-equipment {
    width: 40%;
    height: 70px;
    margin-right: 5%;
    background: linear-gradient(to right, #214b33, #0a1c27);
  }
  .unline-equipment {
    width: 40%;
    height: 70px;
    margin-left: 15%;
    background: linear-gradient(to left, #283e53, #0c1a2b);
  }
  .line-text {
    height: 100%;
    cursor: pointer;
  }
  .warnning {
    width: 80%;
    height: 90px;
    margin-left: 10%;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  .warn-box {
    width: 48%;
    height: 40px;
    padding: 0 20px 0 10px;
    cursor: pointer;
    background-color: #90e9ec;
  }
  .warn-box1 {
    background-color: #3a0d11;
  }
  .warn-box2 {
    background-color: #3e2e16;
  }
  .warn-box3 {
    background-color: #413913;
  }
  .warn-box4 {
    background-color: #143748;
  }
  .warn-text {
    font-size: 14px;
  }
  .warn-num {
    font-size: 18px;
    font-weight: bolder;
  }
}

//事件播报模块
.event-content {
  height: 100%;
  width: 100%;
  border: 1px solid #6eecee;
  border-radius: 2%;
  .event-title {
    height: 30px;
    color: #6eecee;
  }
  .number {
    margin: 5px;
  }
  .iconfont {
    color: #6eecee;
    font-size: 20px;
  }
  .icon-menu-s {
    padding-right: 10px;
  }
  .icon-qita {
    cursor: pointer;
  }
  .event-box {
    width: 97%;
    height: 80%;
    box-sizing: content-box;
  }
  .event-list {
    width: 100%;
    height: 30px;
    margin-top: 10px;
  }
  .event-type {
    width: 20%;
    height: 100%;
    line-height: 30px;
    text-align: center;
    border-radius: 10px;
  }
  .event-text {
    width: 75%;
    height: 30px;
    margin-left: 10px;
    line-height: 30px;
    color: #fff;
  }
}

//未处理隐患
.danger-content {
  width: 100%;
  height: 100%;
  border: 1px solid #6eecee;
  border-radius: 2%;
  .danger-title {
    height: 30px;
    margin: 0 10px;
    color: #6eecee;
  }
  .iconfont {
    color: #6eecee;
    font-size: 20px;
  }
  .icon-menu-s {
    padding-right: 10px;
  }
  .icon-qita {
    cursor: pointer;
  }
  .danger-circle {
    // width: 200px;
    // height: 200px;
    color: #6eecee;
  }
}

// 安全得分模块
.safe {
  width: 18%;
  height: 80%;
}
.safe-box {
  width: 100%;
  height: 100%;
  border: 1px #6eecee solid;
  position: relative;
}
.safe-score {
  width: 100%;
  // height: 200px;
  position: absolute;
  top: -20px;
}
.safe-line {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 140px;
}
.echarts-w {
  position: relative;
  .SelfIcon {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: #6eecee;
    cursor: pointer;
  }
}
.map-left {
  .nav {
    display: flex;
    border: 1px #6eecee solid;
    border-radius: 4px;
    margin-bottom: 10px;
    height: 30%;
    align-items: center;
    justify-content: center;
    color: #6eecee;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      background-color: #0a1c3a;
      color: #fff;
    }
  }
  .event-content {
    padding: 0 10px 10px;
  }
}
.department {
  width: 100%;
  height: 250px;
  padding: 0 40px;
  margin-bottom: 100px;
  .title {
    color: #6eecee;
    font-size: 22px;
    font-weight: 700;
    margin: 5px 0 10px;
  }
}
</style>
